<template>
<div id="box_chat">
<div class="chat-content">
     <!-- recordContent 聊天记录数组-->
     <div v-for="(itemc,indexc) in recordContent" :key="indexc" class="chat_for">
          <!-- 对方 -->
          <div class="word" v-if="!itemc.mineMsg">
               <img src="https://img1.baidu.com/it/u=3438742520,3870787236&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1665248400&t=81d623b42dc8d2457c85d011c6ed1292">
               <div class="info">
                
                    <p class="time">{{itemc.nickName}}</p>
                    <div class="info-content">{{itemc.contactText}}</div>
               </div>
          </div>
          <!-- 我的 -->
          <div class="word-my chat_for"  v-else >
               <div class="info">
                    <p class="time">{{itemc.nickName}}</p>
                    <div class="info-content">{{itemc.contactText}}</div>
               </div>
               <img :src="'http://localhost:7001/public/'+itemc.headUrl">
           </div>
           
      </div>
    


</div>
  <div class="im-footer">
        <el-input placeholder="请输入你想说的内容..." v-model="msg" class="im-footer_inp"/>
        <el-button class="im-footer_btn" type="primary" @click="send">发送</el-button>
      </div>
</div>
</template>

<script setup>

import { ref, reactive } from "vue";
import soket from "../../soket/index"
import {useRoute,useRouter} from 'vue-router'
import store from "../../store/index";
const route=useRoute()
const Mystore=store()
let msg = ref();
let ws=soket(fn1,route.query.id) //将医生的id传到ws中，成为端口号
const list = []
const recordContent=reactive(list)
const send = () => {
  const _msg = msg.value;
  if (!_msg) {
    return;
  }

  //客户端发送信息
  ws.send(JSON.stringify({
    id: Math.ceil(Math.random()*100),
    nickName:Mystore.doctorName,
    contactText:_msg,
    mineMsg:"true",
    headUrl:Mystore.imgURl
  }))


  msg.value=""
};

function fn1(e){
  const msg=JSON.parse(e.data)
  recordContent.push(msg)
}




</script>

<style lang="scss" scoped>






#box_chat{
  width:100%;
  height: 100%;
  
}

.im-footer {
        display: flex;
        width: 100%;
        .im-footer_inp {
          width: 80%;
        }
        .im-footer_btn {
          width: 20%;
        }
      }




.chat-content{
  width: auto;
  // height: 525px;
  height: 87%;
  background-color: #FFF;
  padding: 20px;
  overflow: auto;
  // position: relative;
  .word{
     display: flex;
     margin-bottom: 20px;
     color: black;
     img{
       width: 40px;
       height: 40px;
       border-radius: 50%;
     }
     .info{
       margin-left: 10px;
       .time{
         font-size: 12px;
         color: rgba(51,51,51,0.8);
         margin: 0;
         height: 20px;
         line-height: 20px;
         margin-top: -5px;
       }
       .info-content{
          padding: 10px;
          font-size: 14px;
          background: skyblue;
          position: relative;
          margin-top: 8px;
        }
        //小三角形
        .info-content::before{
            position: absolute;
            left: -8px;
            top: 8px;
            content: '';
            // background: skyblue;
            border-right: 10px solid skyblue;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }
     }
  }
 
.word-my{
    display: flex;
    justify-content:flex-end;
    margin-bottom: 20px;
    img{
       width: 40px;
       height: 40px;
       border-radius: 50%;
     }
     .info{
       width: 90%;
       margin-left: 10px;
       text-align: right;
       .time{
         font-size: 12px;
         color: rgba(51,51,51,0.8);
         margin: 0;
         height: 20px;
         line-height: 20px;
         margin-top: -5px;
         margin-right: 10px;
       }
       .info-content{
          max-width: 70%;
          padding: 10px;
          font-size: 14px;
          float: right;
          margin-right: 10px;
          position: relative;
          margin-top: 8px;
          background: #A3C3F6;
          text-align: left;
        }
        //小三角形
        .info-content::after{
            position: absolute;
            right: -8px;
            top: 8px;
            content: '';
            border-left: 10px solid #A3C3F6;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }
     }
  }
}

</style>